<template>
	<div class="commentList">
    <div class="pro_msg fix">
      <img :src="commentCon.goodInfo.imageUrl" class="pro_img fl"/>
      <p class="pro_name fl">{{commentCon.goodInfo.goodsName}}</p>
      <p class="pro_price fr"><i>￥</i>{{commentCon.goodInfo.shopPrice}}</p>
    </div>
			<div class="comment-list">
				<div class="comment-item" v-for="item in commentCon.commentList.rows">
					<div class="per-con clear">
						<img :src="item.headerUrl" class="photo fl">
            <div class="name fl">{{item.nickname}}</div>
            <div class="time fr">{{item.commentDate}}</div>
					</div>
					<div class="coment-con">{{item.comment}}</div>
          <div class="comment_img clear">
            <img src="" class="fl"/>
          </div>
          <p class="color_cla">颜色分类：{{item.color}}</p>
          <div class="triangle"></div>
          <div class="store_reply" v-if="item.storeComment !='' || null">商家回复：{{item.storeComment}}</div>
				</div>
			</div>
	</div>
</template>
<script>
	import Vue from 'vue'

	export default {
		data () {
			return {
        sku:'',
        commentCon:'',
			}
		},
		name: 'app',
    created(){
      this.sku=this.$route.query.sku;
    },
    mounted:function () {
      this.$nextTick(function () {
        this.commentView();
      });

    },
		methods:{
      commentView:function () {
        var _this = this;
        this.$http.get(Util.ajaxPath.devProductUrl+'shop-mms/mms/goods/comments/'+_this.sku+'/1',{emulateJSON : true}).then(function (res) {
          _this.commentCon = res.body.content;
        });
      },
		}
	}
</script>
<style lang="scss">
.commentList{
  width:100%; height:100%; background: #fff;
  .pro_msg{
    width: 100%; height: 1rem; background: #F4F5F5;
    .pro_img{ width: 0.88rem; height: 0.88rem; margin: 0.06rem 0.3rem;}
    .pro_name{ font-size: 0.22rem; color: #333; line-height: 1rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
    .pro_price{
      margin-right: 0.3rem; font-size: 0.28rem; line-height: 1rem; color: #FF365D;
      i{font-size: 0.22rem; line-height: 1rem; color: #FF365D;}
    }
  }
	.comment-list {
		padding: 0 .3rem;
		.comment-item {
			padding: 0.3rem 0;
			border-bottom: 1px solid #f1f1f1;
		}
		.name {
			color: #151517;
			font-size: .24rem;
      line-height: 0.82rem;
		}
		.time {
			color: #919191;
			font-size: 0.2rem;
      line-height: 0.82rem;
		}
		.coment-con {
			padding-top: .2rem;
			color: #333;
			font-size: 0.26rem;
		}
    .comment_img{
      img{
        width: 2.14rem; height: 2.14rem;
        +img{ margin-left: 0.24rem;}
      }
    }
    .color_cla{ margin-top: 0.15rem; font-size: 0.22rem; color: #999; line-height: 0.22rem;}
    .store_reply{ padding: 0.3rem; font-size: 0.24rem; line-height: 0.36rem; color: #666; background: #F4F5F5;}
    .triangle{ margin: 0 auto; width: 0; height: 0; border-left: 0.16rem solid transparent; border-right: 0.16rem solid transparent; border-bottom: 0.2rem solid #F4F5F5;}
		.photo {
			display: inline-block;
			vertical-align: middle;
			width: .82rem;
			height: .82rem;
			border-radius: 50%;
		}
	}
}
</style>
